<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 绿波计算</title>
    <link rel="stylesheet" href="../components/libs/fontawesome/6.7.2/css/all.min.css" />
    <link rel="stylesheet" href="../components/common/base.css">
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./cal.css" />
</head>

<body class="bg-dark-gradient">
    <!-- 顶部导航组件 -->
    <header class="layout-header">
        <!-- Logo区域 -->
        <div class="layout-logo">
            <i class="fas fa-traffic-light logo-icon"></i>
            <span class="logo-text">干线协调优化平台</span>
        </div>
        
        <!-- 弹性空间 -->
        <div class="header-spacer"></div>
        
        <!-- 业务菜单 -->
        <nav class="header-nav">
            <a href="index.html" class="nav-item" data-action="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="greenwave-sections.html" class="nav-item" data-action="sections">
                <i class="fas fa-road"></i>
                <span>绿波路段</span>
            </a>
            <a href="cal.html" class="nav-item active" data-action="greenwave">
                <i class="fas fa-calculator"></i>
                <span>绿波计算</span>
            </a>
            <a href="tracking.html" class="nav-item" data-action="tracking">
                <i class="fas fa-route"></i>
                <span>绿波效果跟踪</span>
            </a>
            <a href="history.html" class="nav-item" data-action="history">
                <i class="fas fa-history"></i>
                <span>历史方案</span>
            </a>
            <a href="work.html" class="nav-item" data-action="work">
                <i class="fas fa-clipboard-list"></i>
                <span>工作记录</span>
            </a>
        </nav>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
        <div class="cal-container">
            <!-- 页面标题区域 -->
            <header class="cal-header">
                <div class="cal-title">
                    <i class="fas fa-calculator"></i>
                    <h1>绿波协调计算</h1>
                    <span class="subtitle">智能计算干线绿波协调配时方案</span>
                </div>
                <div class="cal-stats">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-crosshairs"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">12</div>
                            <div class="stat-label">活跃路口</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-wave-square"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">3</div>
                            <div class="stat-label">绿波干线</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon info">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">85.2%</div>
                            <div class="stat-label">平均效率</div>
                        </div>
                    </div>
                </div>
            </header>

            <div class="cal-content">
                <!-- 左侧配置区域 -->
                <div class="config-panel">
                    <!-- 路口选择区域 -->
                    <section class="config-section">
                        <div class="section-header">
                            <h3 class="section-title">
                                <i class="fas fa-map-marker-alt"></i>
                                路口选择配置
                            </h3>
                        </div>
                        
                        <div class="intersection-selection">
                            <!-- <div class="selection-controls">
                                <button class="btn btn-outline btn-sm">
                                    <i class="fas fa-plus"></i>
                                    添加路口
                                </button>
                                <button class="btn btn-secondary btn-sm">
                                    <i class="fas fa-map"></i>
                                    地图选择
                                </button>
                            </div> -->
                            
                            <div class="selected-intersections">
                                <div class="intersection-item active">
                                    <div class="intersection-info">
                                        <div class="intersection-name">振州路-裕民路</div>
                                        <div class="intersection-id">ID: 19582</div>
                                        <div class="intersection-ctrl">控制器: 海康</div>
                                    </div>
                                    <div class="intersection-actions">
                                        <button class="action-btn config" title="配置">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <button class="action-btn remove" title="移除">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="intersection-item">
                                    <div class="intersection-info">
                                        <div class="intersection-name">振州路-创业街</div>
                                        <div class="intersection-id">ID: 19583</div>
                                        <div class="intersection-ctrl">控制器: 海康</div>
                                    </div>
                                    <div class="intersection-actions">
                                        <button class="action-btn config" title="配置">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <button class="action-btn remove" title="移除">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="intersection-item">
                                    <div class="intersection-info">
                                        <div class="intersection-name">迎宾路-荔枝沟路</div>
                                        <div class="intersection-id">ID: 22103</div>
                                        <div class="intersection-ctrl">控制器: PSC</div>
                                    </div>
                                    <div class="intersection-actions">
                                        <button class="action-btn config" title="配置">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <button class="action-btn remove" title="移除">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="intersection-item">
                                    <div class="intersection-info">
                                        <div class="intersection-name">凤凰路-河东路</div>
                                        <div class="intersection-id">ID: 16403</div>
                                        <div class="intersection-ctrl">控制器: 海康</div>
                                    </div>
                                    <div class="intersection-actions">
                                        <button class="action-btn config" title="配置">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <button class="action-btn remove" title="移除">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 计算参数配置 -->
                    <section class="config-section">
                        <div class="section-header">
                            <h3 class="section-title">
                                <i class="fas fa-sliders-h"></i>
                                计算参数配置
                            </h3>
                        </div>
                        
                        <div class="param-groups">
                            <div class="param-group">
                                <label class="param-label">设计车速 (km/h)</label>
                                <div class="param-input-group">
                                    <input type="number" class="param-input" value="50" min="30" max="80">
                                    <span class="param-unit">km/h</span>
                                </div>
                            </div>
                            
                            <div class="param-group">
                                <label class="param-label">绿波带宽度 (s)</label>
                                <div class="param-input-group">
                                    <input type="number" class="param-input" value="30" min="20" max="60">
                                    <span class="param-unit">秒</span>
                                </div>
                            </div>
                            
                            <div class="param-group">
                                <label class="param-label">公共周期 (s)</label>
                                <div class="param-input-group">
                                    <input type="number" class="param-input" value="120" min="60" max="180">
                                    <span class="param-unit">秒</span>
                                </div>
                            </div>
                            
                            <div class="param-group">
                                <label class="param-label">优化方向</label>
                                <select class="param-select">
                                    <option value="both">双向优化</option>
                                    <option value="forward">正向优化</option>
                                    <option value="backward">反向优化</option>
                                </select>
                            </div>
                            
                            <div class="param-group">
                                <label class="param-label">优化目标</label>
                                <select class="param-select">
                                    <option value="bandwidth">最大带宽</option>
                                    <option value="delay">最小延误</option>
                                    <option value="efficiency">最优效率</option>
                                </select>
                            </div>
                            
                            <div class="param-group">
                                <label class="param-label">计算精度</label>
                                <select class="param-select">
                                    <option value="high">高精度</option>
                                    <option value="medium">中等精度</option>
                                    <option value="fast">快速计算</option>
                                </select>
                            </div>
                        </div>
                    </section>

                    <!-- 计算控制 -->
                    <section class="config-section">
                        <div class="section-header">
                            <h3 class="section-title">
                                <i class="fas fa-play-circle"></i>
                                计算控制
                            </h3>
                        </div>
                        
                        <div class="calc-controls">
                            <button class="btn btn-primary btn-large">
                                <i class="fas fa-calculator"></i>
                                开始计算
                            </button>
                            <button class="btn btn-outline btn-large">
                                <i class="fas fa-save"></i>
                                保存配置
                            </button>
                        </div>
                        
                        <div class="calc-progress">
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 65%"></div>
                            </div>
                            <div class="progress-text">计算进度: 65%</div>
                        </div>
                    </section>
                </div>

                <!-- 右侧结果区域 -->
                <div class="result-panel">
                    <!-- 计算结果展示 -->
                    <section class="result-section">
                        <div class="section-header">
                            <h3 class="section-title">
                                <i class="fas fa-chart-bar"></i>
                                计算结果
                            </h3>
                            <div class="result-actions">
                                <button class="btn btn-outline btn-sm">
                                    <i class="fas fa-download"></i>
                                    导出结果
                                </button>
                                <button class="btn btn-primary btn-sm">
                                    <i class="fas fa-save"></i>
                                    保存方案
                                </button>
                            </div>
                        </div>
                        
                        <div class="result-summary">
                            <div class="summary-cards">
                                <div class="summary-card">
                                    <div class="card-icon success">
                                        <i class="fas fa-wave-square"></i>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-value">42s</div>
                                        <div class="card-label">绿波带宽</div>
                                    </div>
                                </div>
                                
                                <div class="summary-card">
                                    <div class="card-icon info">
                                        <i class="fas fa-tachometer-alt"></i>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-value">87.5%</div>
                                        <div class="card-label">协调效率</div>
                                    </div>
                                </div>
                                
                                <div class="summary-card">
                                    <div class="card-icon warning">
                                        <i class="fas fa-clock"></i>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-value">-23%</div>
                                        <div class="card-label">延误降低</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 相位配时表 -->
                        <div class="timing-table-container">
                            <h4 class="table-title">
                                <i class="fas fa-table"></i>
                                优化配时方案
                            </h4>
                            
                            <div class="timing-table">
                                <table class="result-table">
                                    <thead>
                                        <tr>
                                            <th>路口名称</th>
                                            <th>周期时长</th>
                                            <th>绿灯时间</th>
                                            <th>相位差</th>
                                            <th>协调相位</th>
                                            <th>绿波效率</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="intersection-name">振州路-裕民路</td>
                                            <td class="timing-value">120s</td>
                                            <td class="timing-value highlight">45s</td>
                                            <td class="timing-value">0s</td>
                                            <td class="phase-indicator">
                                                <span class="phase-badge phase-1">相位1</span>
                                            </td>
                                            <td class="efficiency-cell">
                                                <div class="efficiency-bar">
                                                    <div class="efficiency-fill" style="width: 92%"></div>
                                                </div>
                                                <span class="efficiency-text">92%</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="intersection-name">振州路-创业街</td>
                                            <td class="timing-value">120s</td>
                                            <td class="timing-value highlight">42s</td>
                                            <td class="timing-value">15s</td>
                                            <td class="phase-indicator">
                                                <span class="phase-badge phase-1">相位1</span>
                                            </td>
                                            <td class="efficiency-cell">
                                                <div class="efficiency-bar">
                                                    <div class="efficiency-fill" style="width: 88%"></div>
                                                </div>
                                                <span class="efficiency-text">88%</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="intersection-name">迎宾路-荔枝沟路</td>
                                            <td class="timing-value">120s</td>
                                            <td class="timing-value highlight">38s</td>
                                            <td class="timing-value">28s</td>
                                            <td class="phase-indicator">
                                                <span class="phase-badge phase-2">相位2</span>
                                            </td>
                                            <td class="efficiency-cell">
                                                <div class="efficiency-bar">
                                                    <div class="efficiency-fill" style="width: 85%"></div>
                                                </div>
                                                <span class="efficiency-text">85%</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="intersection-name">凤凰路-河东路</td>
                                            <td class="timing-value">120s</td>
                                            <td class="timing-value highlight">40s</td>
                                            <td class="timing-value">35s</td>
                                            <td class="phase-indicator">
                                                <span class="phase-badge phase-1">相位1</span>
                                            </td>
                                            <td class="efficiency-cell">
                                                <div class="efficiency-bar">
                                                    <div class="efficiency-fill" style="width: 90%"></div>
                                                </div>
                                                <span class="efficiency-text">90%</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>

                    <!-- 时空图展示 -->
                    <section class="result-section">
                        <div class="section-header">
                            <h3 class="section-title">
                                <i class="fas fa-chart-line"></i>
                                绿波时空图
                            </h3>
                            <div class="chart-controls">
                                <button class="btn btn-outline btn-sm">
                                    <i class="fas fa-expand"></i>
                                    全屏显示
                                </button>
                            </div>
                        </div>
                        
                        <div class="chart-container">
                            <div class="chart-placeholder">
                                <div class="chart-bg">
                                    <div class="chart-grid"></div>
                                    <div class="green-wave-bands">
                                        <div class="wave-band band-1"></div>
                                        <div class="wave-band band-2"></div>
                                        <div class="wave-band band-3"></div>
                                        <div class="wave-band band-4"></div>
                                    </div>
                                    <div class="intersection-lines">
                                        <div class="intersection-line" data-name="振州路-裕民路"></div>
                                        <div class="intersection-line" data-name="振州路-创业街"></div>
                                        <div class="intersection-line" data-name="迎宾路-荔枝沟路"></div>
                                        <div class="intersection-line" data-name="凤凰路-河东路"></div>
                                    </div>
                                </div>
                                <div class="chart-axes">
                                    <div class="x-axis">
                                        <span class="axis-label">时间 (s)</span>
                                        <div class="axis-ticks">
                                            <span>0</span>
                                            <span>30</span>
                                            <span>60</span>
                                            <span>90</span>
                                            <span>120</span>
                                        </div>
                                    </div>
                                    <div class="y-axis">
                                        <span class="axis-label">距离 (m)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>

</body>

</html>
